<template>
  <div class="register">
    <cube-form>
      <!-- 用户名和密码输入保持不变 -->
      <cube-form-item aria-label="用户名">
        <cube-input v-model="form.username" placeholder="请输入用户名"></cube-input>
      </cube-form-item>
      <cube-form-item label="密码">
        <cube-input v-model="form.password" type="password" placeholder="请输入密码"  :eye="eye"></cube-input>
      </cube-form-item>
      <cube-form-item label="邮箱">
        <cube-input v-model="form.email" type="email" placeholder="请输入邮箱" @blur="validateEmail"></cube-input>
      </cube-form-item>

      <div class="code">
        <cube-form-item label="验证码">
          <cube-input v-model="form.code" placeholder="请输入验证码"></cube-input>
        </cube-form-item>
        <cube-button :primary="true" :disabled="isSending" @click="sendCode">
          {{ isSending ? countdown : '发送验证码' }}
        </cube-button>
      </div>

      <cube-button :light="true" @click="submit">注册</cube-button>
    </cube-form>

  </div>
</template>

<script>
import { Toast } from 'cube-ui';


export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        code: ''
      },
      countdown: 60, // 初始倒计时时间  
      isSending: false, // 标记是否正在发送验证码或倒计时  
      timer: null, // 定时器ID  
      eye: {
        open: true,
        reverse: false
      }
    };
  },

  methods: {
    sendCode() {
      if (this.isSending) return; // 如果正在倒计时或发送中，则不执行  

      if (!this.validateEmail(this.form.email)) {
        const toast = this.$createToast({
          time: 3000,
          txt: '邮箱不合法',
          type: 'txt'
        })
        toast.show()
        return;
      }

      // 这里可以添加发送验证码到服务器的逻辑  
      const result = this.$http.get("/wx/email/send", {params : {"email": this.form.email}})
        .then(response => {
          var data = response.data;
          //console.log(data);
          if (response.status != 200 || data.code != '200') {
            const toast = this.$createToast({
              time: 3000,
              txt: data.message,
              type: 'txt'
            })
            toast.show()
          }

          //登录成功
          if (data.code == '000000') {
            //console.log(data);
            const toast = this.$createToast({
              time: 1000,
              txt: '发送验证码成功',
              type: 'txt'
            });
            toast.show();

            // 假设验证码已发送，开始倒计时  
            this.isSending = true;
            this.timer = setInterval(() => {
              if (this.countdown <= 0) {
                clearInterval(this.timer);
                this.countdown = 60; // 重置倒计时  
                this.isSending = false;
              } else {
                this.countdown--;
              }
            }, 1000);
          }
        })
        .catch(error => {
          console.error(error);
        });


    },
    submit() {
      let param = this.form;

      const result = this.$http.post("/wx/user/register", param)
        .then(response => {
          var data = response.data;
          //console.log(data);
          if (response.status != 200 || data.code != '200') {
            const toast = this.$createToast({
              time: 3000,
              txt: data.message,
              type: 'txt'
            })
            toast.show()
          }

          //注册成功
          if (data.code == '000000') {
            //console.log(data);
            const toast = this.$createToast({
              time: 1000,
              txt: '注册成功',
              type: 'txt'
            });
            toast.show();

            //跳转到登录页
            this.$router.push({ path: '/login' });
           
          }
        })
        .catch(error => {
          console.error(error);
        });


    },
    validateEmail() {
      const email = this.form.email;
      // 简单的邮箱验证正则表达式  
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (!emailRegex.test(email)) {
        const toast = this.$createToast({
          time: 3000,
          txt: '邮箱不合法',
          type: 'txt'
        })
        toast.show()
      }
      return true;
    }
  },
}

</script>

<style lang="stylus">

</style>